<!--
 * Copyright TLR Team, Inc. All Rights Reserved.
-->
<div class="container-fluid">
    <!-- Page Heading -->
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header page-header2">
                健康精灵地图管理
            </h1>
        </div>
    </div>
    <!-- /.row -->
    <div class="row">
        <div class="col-lg-4 col-md-6">
            <div class="panel panel-red">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-3">
                            <i class="fa fa-comments fa-5x"></i>
                        </div>
                        <div class="col-xs-9 text-right">
                            <div class="huge">{{alertMessageList.length}}</div>
                            <div>健康精灵报警看板</div>
                            <audio id="alertWAV" src="app/audio/alert.WAV" loop="loop">您的浏览器不支持声音播放</audio>
                        </div>
                    </div>
                </div>
                <a href="" data-toggle="modal" data-target="#AlertDeviceModal" ng-click="onViewDetail('alert')">
                    <div class="panel-footer">
                        <span class="pull-left">查看细节</span>
                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                        <div class="clearfix"></div>
                    </div>
                </a>
            </div>
        </div> 
        <div class="col-lg-4 col-md-6">
            <div class="panel panel-green">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-3">
                            <i class="fa fa-comments fa-5x"></i>
                        </div>
                        <div class="col-xs-9 text-right">
                            <div class="huge">{{validHealthDeviceCount}}</div>
                            <div>正常工作设备</div>
                        </div>
                    </div>
                </div>
                <a href="" data-toggle="modal" data-target="#DeviceModal" ng-click="onViewDetail('normal')">
                    <div class="panel-footer">
                        <span class="pull-left">查看细节</span>
                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                        <div class="clearfix"></div>
                    </div>
                </a>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="panel panel-yellow">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-3">
                            <i class="fa fa-comments fa-5x"></i>
                        </div>
                        <div class="col-xs-9 text-right">
                            <div class="huge">{{invalidHealthDeviceCount}}</div>
                            <div>故障设备</div>
                        </div>
                    </div>
                </div>
                <a href="" data-toggle="modal" data-target="#DeviceModal" ng-click="onViewDetail('fault')">
                    <div class="panel-footer">
                        <span class="pull-left">查看细节</span>
                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                        <div class="clearfix"></div>
                    </div>
                </a>
            </div>
        </div>
        <ng-include src="'app/mvp/template/view/dashboard/form/health_device_list_form.html'"></ng-include>
        <ng-include src="'app/mvp/template/view/dashboard/form/health_device_alert_list_form.html'"></ng-include>
    </div>
    <!-- /.row -->
    <div class="row">
        <div class="col-sm-12" id="health-map-container-parent">
            <div id="health-map-container"  style="border: 1px solid #999;"></div>
            <div class="row tip-group" ng-if="healthDevices">
                <div class="col-sm-4">
                    <div style="vertical-align:middle; text-align:center;">
                        <div class="tip-item" style="padding-top:8px;font-size:16px;">健康等级</div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div style="vertical-align:middle; text-align:center;">
                        <div class="tip-item tip-item-1">优</div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div style="vertical-align:middle; text-align:center;">
                        <div class="tip-item tip-item-2">良</div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div style="vertical-align:middle; text-align:center;">
                        <div class="tip-item tip-item-3">中</div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div style="vertical-align:middle; text-align:center;">
                        <div class="tip-item tip-item-4">差</div>
                    </div>
                </div>
            </div>
            <div class="row tip-group" ng-if="!healthDevices">
                <div class="col-sm-12">
                    <div style="vertical-align:middle; text-align:center;">
                        <div class="tip-item tip-car-item-font tip-item-1">正在搜索健康数值分布信息 ...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /.row -->
</div>